<template>
  <!--头部-->
  <header>
    <HeaderMod></HeaderMod>
  </header>
  <!--主体 -->
  <main>
    <!-- 天气详情-->
    <div class="information">
      <div class="information1">
        <span> 你正在浏览{{ route.params.cityName }}市的天气信息 </span>
      </div>
      <div class="information2">
        <span>当前气温是：{{ detailWeather.daytemp }}摄氏度</span>
        <span>当日天气是: {{ detailWeather.dayweather }}</span>
        <span>当日风向是：{{ detailWeather.daywind }}风</span>
        <span>当日风力是：≤{{ detailWeather.daypower.split('-')[1] }}级</span>
      </div>
    </div>
    <!-- 天气卡片 -->
    <div class="recent">
      <CardModsea></CardModsea>
    </div>
  </main>
</template>

<script setup>
import { ref, watch } from 'vue';

import HeaderMod from '../components/HeaderMod.vue';
import CardModsea from '../components/CardModsea.vue';

// 引入路由
import { useRoute } from 'vue-router';
const route = useRoute();

 //引入pinia 
import { storeToRefs } from 'pinia';
import { useLocalStore } from '@/stores/local';
const { searchWeatherp } = storeToRefs(useLocalStore()); 

// 存放天气信息的数组
const detailWeather = ref([]);

// 监听 searchWeatherp 变化，数据更新后执行
watch(
  searchWeatherp,
  (newVal) => {
    detailWeather.value = newVal[0];
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
//主体样式
main {
  .information {
    text-align: center;
    span {
      color: #ffffff;
      font-size: 17px;
    }
    .information1 {
      background-color: #004e71;
      padding: 13px 0;
    }
    .information2 {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 24px 0;
      border-bottom: 1px solid #1a7696;
    }
  }
  // 天气卡片样式
  .recent {
    margin: 0 160px;

    span {
      color: #ffffff;
      font-size: 17px;
    }
  }
}
</style>
